<template>
    <div class="tree">
        <el-input
            placeholder="输入关键字进行过滤"
            v-model.trim="filterText"
            @change="handleFilter"
        >
        </el-input>

        <ElTre
            class="filter-tree"
            show-checkbox
            check-strictly
            node-key="id"
            :data="data"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree"
            @check="checkTree"
        >
        </ElTre>
    </div>
</template>
<script>
import ElTre from 'element-ui/packages/tree/index'
export default {
    name: 'TreeName',
    components: { ElTre },
    watch: {
        /* filterText(val) {
            this.$refs.tree.filter(val)
        }, */
    },

    methods: {
        checkTree(data, checked) {
            console.log('checkTree', data, checked)
            // console.log('checkTree', this.$refs.tree)
            const node = this.$refs.tree.store.getNode(data.id)
            // console.log('checkTree', node)
            let parentNode = node.parent
            while (parentNode) {
                parentNode.checked = true
                parentNode = parentNode.parent
            }
        },
        changeTreeNodeVisible(nodes, defaultVisible) {
            if (!nodes?.length) return
            nodes.forEach((node) => {
                const visible =
                    defaultVisible ||
                    node.data.label.indexOf(this.filterText) !== -1
                node.visible = visible
                if (node.visible) {
                    let parentNode = node.parent
                    while (parentNode) {
                        parentNode.visible = true
                        parentNode = parentNode.parent
                    }
                }
                this.changeTreeNodeVisible(node.childNodes, visible)
            })
        },
        handleFilter() {
            const rootNode = this.$refs.tree.root
            this.changeTreeNodeVisible(rootNode.childNodes, false)
        },
        filterNode(value, data, node) {
            if (node.childNodes) if (!value) return true
            return data.label.indexOf(value) !== -1
        },
    },

    data() {
        return {
            filterText: '',
            data: [
                {
                    id: 1,
                    label: '一级 1',
                    children: [
                        {
                            id: 4,
                            label: '二级 1-1',
                            children: [
                                {
                                    id: 9,
                                    label: '三级 1-1-1',
                                },
                                {
                                    id: 10,
                                    label: '三级 1-1-2',
                                },
                            ],
                        },
                        {
                            id: 99,
                            label: '二级 1-2',
                            children: [
                                {
                                    id: 98,
                                    label: '三级',
                                },
                                {
                                    id: 97,
                                    label: '三级',
                                },
                            ],
                        },
                    ],
                },
                {
                    id: 2,
                    label: '一级 2',
                    children: [
                        {
                            id: 5,
                            label: '二级 2-1',
                        },
                        {
                            id: 6,
                            label: '二级 2-2',
                        },
                    ],
                },
                {
                    id: 3,
                    label: '一级 3',
                    children: [
                        {
                            id: 7,
                            label: '二级 3-1',
                        },
                    ],
                },
            ],
            defaultProps: {
                children: 'children',
                label: 'label',
            },
        }
    },
}
</script>
<style lang="scss" scoped>
.tree {
}
</style>
